<template>
  <div>
    <el-alert
      title="由于权限原因，您不能修改此页面的设置"
      type="warning"
      :closable="false"
      v-show="disabled"
    >
    </el-alert>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="临期提醒设置" name="临期提醒设置">
        <el-row :gutter="20" class="clearfix">
          <el-col
            v-for="config in expiryChecking"
            :key="config.key"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <el-card shadow="hover" style="margin-bottom: 30px">
              <div slot="header" class="header">
                <span>{{ config.key }}</span>
                <el-tag size="medium" type="warning">临期提醒</el-tag>
              </div>
              <el-form>
                <el-form-item label="开启此项">
                  <el-switch
                    v-model="config.enable"
                    @change="
                      (value) => {
                        updateParam('expiryChecking');
                      }
                    "
                    :disabled="disabled"
                  ></el-switch>
                </el-form-item>
                <el-form-item label="消息推送">
                  <el-switch
                    v-model="config.notify"
                    @change="
                      (value) => {
                        updateParam('expiryChecking');
                      }
                    "
                    :disabled="disabled"
                  ></el-switch>
                </el-form-item>

                <el-form-item label="提前天数">
                  <el-select
                    v-model="config.days"
                    @change="
                      (value) => {
                        updateParam('expiryChecking');
                      }
                    "
                    placeholder="请选择"
                    style="width:calc(100% - 5.5em)"
                    :disabled="disabled"
                  >
                    <el-option
                      v-for="item in redundencyDays"
                      :key="item"
                      :label="item + '天'"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="忽略人员">
                  <el-select
                    v-model="config.blacklist"
                    @change="
                      (value) => {
                        updateParam('expiryChecking');
                      }
                    "
                    placeholder="请选择"
                    filterable
                    multiple
                    style="width:calc(100% - 5.5em)"
                    :disabled="disabled"
                  >
                    <el-option
                      v-for="item in staffList"
                      :key="item.number"
                      :label="item.clientName"
                      :value="item.number"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="隐藏推送">
                  <el-select
                    v-model="config.ignored"
                    @change="
                      (value) => {
                        updateParam('expiryChecking');
                      }
                    "
                    placeholder="请选择"
                    filterable
                    multiple
                    style="width:calc(100% - 5.5em)"
                    :disabled="disabled"
                  >
                    <el-option
                      v-for="item in staffList"
                      :key="item.number"
                      :label="item.clientName"
                      :value="item.number"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="缺失提醒设置" name="缺失提醒设置">
        <el-row :gutter="20" class="clearfix">
          <el-col
            v-for="config in missingChecking"
            :key="config.key"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <el-card shadow="hover" style="margin-bottom: 30px">
              <div slot="header" class="header">
                <span>{{ config.key }}</span>
                <el-tag size="medium" type="danger">缺失提醒</el-tag>
              </div>
              <el-form>
                <el-form-item label="开启此项">
                  <el-switch
                    v-model="config.enable"
                    @change="
                      (value) => {
                        updateParam('missingChecking');
                      }
                    "
                    :disabled="disabled"
                  ></el-switch>
                </el-form-item>
                <el-form-item label="消息推送">
                  <el-switch
                    v-model="config.notify"
                    @change="
                      (value) => {
                        updateParam('missingChecking');
                      }
                    "
                    :disabled="disabled"
                  ></el-switch>
                </el-form-item>
                <el-form-item label="忽略人员">
                  <el-select
                    v-model="config.blacklist"
                    placeholder="请选择"
                    filterable
                    multiple
                    style="width:calc(100% - 5.5em)"
                    @change="
                      (value) => {
                        updateParam('missingChecking');
                      }
                    "
                    :disabled="disabled"
                  >
                    <el-option
                      v-for="item in staffList"
                      :key="item.number"
                      :label="item.clientName"
                      :value="item.number"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="隐藏推送">
                  <el-select
                    v-model="config.ignored"
                    @change="
                      (value) => {
                        updateParam('missingChecking');
                      }
                    "
                    placeholder="请选择"
                    filterable
                    multiple
                    style="width:calc(100% - 5.5em)"
                    :disabled="disabled"
                  >
                    <el-option
                      v-for="item in staffList"
                      :key="item.number"
                      :label="item.clientName"
                      :value="item.number"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "qywxView",
  components: {},
  data() {
    return {
      requiredAdminLevel: 2,
      activeName: "临期提醒设置",
      redundencyDays: [15, 30, 60, 90],
      expiryChecking: [],
      missingChecking: [],
    };
  },
  computed: {
    dataConfig() {
      return this.$store.state.dataConfig;
    },
    staffList() {
      return this.$store.state.staffList;
    },
    adminLevel() {
      return this.$store.getters.adminLevel;
    },
    disabled() {
      return this.adminLevel < this.requiredAdminLevel;
    },
  },
  methods: {
    handleTabClick() {},
    updateParam(name) {
      let payload = null;
      if (name == "expiryChecking") {
        payload = { name: "expiryChecking", value: this.expiryChecking };
      } else if (name == "missingChecking") {
        payload = { name: "missingChecking", value: this.missingChecking };
      }
      this.$store
        .dispatch("updateParam", payload)
        .then(() => {
          this.$message.success("已修改");
        })
        .catch((error) => {
          this.$message.error("出错了" + JSON.stringify(error));
        });
    },
  },
  mounted() {
    // console.log(JSON.stringify(this.missingChecking));
    // console.log(JSON.stringify(this.expiryChecking));
    this.expiryChecking = JSON.parse(
      JSON.stringify(this.$store.state.config.params.expiryChecking)
    );
    this.missingChecking = JSON.parse(
      JSON.stringify(this.$store.state.config.params.missingChecking)
    );
  },
};
</script>

<style scoped>
.clearfix {
  clear: both;
  display: flex;
  width: 100%;
  padding: 12px;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
